<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>第六章</title>
</head>
<body>
    <div id="app">
        <input type="radio" v-model="picked" :value="value">
        <label>单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>

        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
        <label>复选框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>

        <p>总数： {{ total }}</p>
        <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>

        <child-component>
            <template scope="props">
                <p>来自父组件的内容</p>
                <p>{{ props.msg }}</p>
            </template>
        </child-component>

        <component-a :parobj="parobj"></component-a>
        <component-b v-model="total"></component-b>

        <input v-model="parobj.val">
        
        <slot-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <p>更多正文内容</p>
            <div slot="footer">底部信息</div>
        </slot-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
</body>
</html>